@use '../../../styles/mixins';

.color-panel {
    position: relative;
    width: 700px;
    border: 1px solid var(--g-color-line-generic);
    border-radius: 6px;
    padding: 15px 20px;
    transition: 0.15s linear;
    transition-property: color, background-color;

    &_bg {
        &_brand,
        &_dark {
            .color-panel__title,
            .color-panel__colors {
                color: var(--g-color-text-light-primary);
            }

            .color-panel__description {
                color: var(--g-color-text-light-complementary);
            }

            .color-panel__card-var {
                color: var(--g-color-text-light-secondary);
            }
        }

        &_brand {
            background: var(--g-color-base-brand);
        }

        &_dark {
            background: #444;
        }
    }

    &__bg-switcher {
        position: absolute;
        inset-block-start: 15px;
        inset-inline-end: 15px;
    }

    &__title {
        @include mixins.text-header-1();
    }

    &__description {
        @include mixins.text-body-2();
        color: var(--g-color-text-complementary);
        margin-block-start: 3px;
    }

    &:not(:first-of-type) {
        margin-block-start: 25px;
    }

    &__colors {
        margin-block-start: 15px;
    }

    &__card {
        display: flex;
        &:not(:first-of-type) {
            margin-block-start: 15px;
        }

        &-box {
            flex-shrink: 0;
            margin: 5px 15px 0 0;
            width: 40px;
            height: 40px;
            border-radius: 6px;
            cursor: pointer;

            &_bordered {
                border: 2px solid var(--g-color-line-generic);
            }
        }

        &-texts {
            display: flex;
            flex-direction: column;
            justify-content: center;
            max-width: 600px;
        }

        &-headline {
            display: flex;
            align-items: center;
        }

        &-title {
            @include mixins.text-body-3();
        }

        &-var {
            @include mixins.text-code-1();
            color: var(--g-color-text-secondary);
            margin-inline-start: 10px;
            white-space: nowrap;
        }

        &-description {
            @include mixins.text-body-2();
        }

        &-box,
        &-var {
            cursor: copy;
        }
    }
}
